<script setup>
  import useUserStore from "../../store/modules/user";
  const userStore = useUserStore();

  import { ElMessage } from "element-plus";

  import { getCodeInfo } from "../../api/user";
  import { onMounted, ref } from "vue";

  const captchaInfo = ref("");
  onMounted(()=> {
    getCodeInfo(new Date().getTime()).then(({ data })=> {
      captchaInfo.value = data.result;
    }).catch((err)=> {
      console.log('err ----- ', err);
    });
  });

  /**
   * Login
   */
  function login() {
    userStore.handlerLogin().then((res)=> {
      ElMessage.success(res);
    }).catch((err)=> {
      ElMessage.error(err);
    });
  }

  /**
   * Logout
   */
  function logout() {
    userStore.handlerLogout().then(()=> {
      ElMessage.success("Logout success");
    }).catch((err)=> {
      ElMessage.error(err);
    });
  }
</script>

<template>
  <div class="login-container">
    <el-button type="primary" @click="login">Login</el-button>
    <el-button type="primary" @click="logout">Logout</el-button>

    <hr>
    <h1>Current Login Status: {{ userStore.loginStatus ? "Logined" : "Not login" }}</h1>
    <ul>
      <li>Username: {{ userStore.userInfo.name }}</li>
      <li>Avatar: <img :src="userStore.userInfo.avatar" alt=""></li>
    </ul>

    <ul>
      <li>AaptchaInfo: <img :src="captchaInfo" alt=""></li>
    </ul>
  </div>
</template>